<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>库存预警管理</title>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    仓库名称
    <el-select v-model="warehouseId" placeholder="请选择仓库">
        <el-option
                v-for="item in warehouseNameAll"
                :key="item.value"
                :label="item.wareName"
                :value="item.id">
        </el-option>
    </el-select>&nbsp;&nbsp;&nbsp;
    产品名称
    <el-input v-model="productName" placeholder="请输入产品名称" style="width:400px"></el-input>

    <el-button @click="selectWarehouse" type="primary" icon="el-icon-search"
               style="margin-left: 100px;margin-top: 0px; ">查询
    </el-button>
    <template>
        <el-table
                :data="warningData"
                style="width: 100%">
            <el-table-column
                    label="序号"
                    type="index">
            </el-table-column>
            <el-table-column
                    label="仓库名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tware.wareName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产品编号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tproduct.pnumber }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="产品名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tproduct.pname }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="库存量">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tproduct.pquality }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <span style="margin-left: -10px" v-if=" scope.row.warningNum <= scope.row.tproduct.pquality">
                        <el-button type="success" round>库存充足</el-button>
                    </span>
                    <span style="margin-left: -10px" v-if=" scope.row.warningNum > scope.row.tproduct.pquality">
                      <el-button type="danger" round>库存不足</el-button>
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                    label="备注">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.tproduct.premarks }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="当前商品预警值">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.warningNum }}</span>
                </template>
            </el-table-column>
            <el-table-column label="设置预警值">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">修改预警值
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                @current-change="refreshData"
                :total="total"
                :current-page="current"
                :page-size="pageSize">
        </el-pagination>
        <!--保存新增用户的对话框-->
        <el-dialog title="设置当前预警值" :visible.sync="dialogFormVisible" label-width="100px" @close="closeMyDialog">
            <el-form :model="dataIdWarning" label-width="160px">
                <el-form-item label="仓库名称:" :label-width="formLabelWidth">
                    <el-input v-model="dataIdWarning.tware.wareName" autocomplete="off"
                              :label-width="formLabelWidthInputBox" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="产品名称:" :label-width="formLabelWidth">
                    <el-input v-model="dataIdWarning.tproduct.pname " autocomplete="off"
                              :label-width="formLabelWidthInputBox" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="当前预警值:" :label-width="formLabelWidth">
                    <el-input v-model="dataIdWarning.warningNum" autocomplete="off"
                              :label-width="formLabelWidthInputBox" disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="设置预警值:" :label-width="formLabelWidth">
                    <el-input v-model="dataIdWarning.warningNumUpdate" autocomplete="off"
                              :label-width="formLabelWidthInputBox"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveProduct">确 定</el-button>
            </div>
        </el-dialog>
    </template>
</div>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                dialogFormVisible: false,//隐藏弹框
                formLabelWidth: '100px',//大小弹框
                formLabelWidthInputBox: '80px',//输入框大小
                warehouseNameAll: null,//所有仓库名称
                productNameAll: null,//所有产品名称
                warehouseId: '',//当前仓库名id
                productName: '',//当前产品名称
                warningData: null,//仓库所有的数据
                total: 0,
                current: 1,
                pageSize: 2,//分页数据
                dataIdWarning: {
                    tproduct: {
                        pname: '',
                    },
                    tware: {
                        wareName: '',
                    },
                    warningNum: null,
                    warningNumUpdate: null,  //修改后的值
                }, //单个数据
            }
        },
        mounted() {//加载
            this.refreshData(1);
            axios.get("/list/t-ware").then(value => {//查询所有仓库名称
                if (value.data.state == 1) {
                    this.warehouseNameAll = value.data.data;
                    console.log(this.warehouseNameAll)
                }
            });
        },
        methods: {
            refreshData(current) { //查询语句
                this.current = current;
                axios.get("/t-warning/selectList", {
                    params: {
                        current: this.current,//传入分页参数
                        warehouseId: this.warehouseId,
                        productName: this.productName,
                    }
                }).then(value => {
                    if (value.data.state == 1) {
                        this.warningData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.current = value.data.data.current;
                        console.log(this.warningData);
                    }
                })
            },
            selectWarehouse() {//查询方法
                console.log("查询方法")
                this.refreshData(this.current);
                /*  axios.post("/t-warning/selectById/"+this.warehouseId+"&"+this.productName).then(value=>{
                    if (value.data.state==1){
                        this.warningData=value.data.data;
                        console.log(this.warningData);
                    }
                })*/
            },
            closeMyDialog() {//取消
                this.dataIdWarning.warningNumUpdate = null
            },
            saveProduct() {//提交修改  --预警值
                axios.put("/t-warning/update", {
                    warningNum: this.dataIdWarning.warningNumUpdate,
                    productId: this.dataIdWarning.productId,
                    warehouseId: this.dataIdWarning.warehouseId
                }).then(value => {
                    if (value.data.state == 1) {
                        this.$message("修改成功!")
                        this.dialogFormVisible = false
                        this.refreshData(this.current)
                    }
                })
            },
            handleEdit(index, row) {//修改预警值
                this.dataIdWarning = row;//赋值
                this.dialogFormVisible = true;//显示弹框
                console.log(row);
            },
        },
    })
</script>
</body>
</html>